<template>
  <div
    class="pay"
    v-if="pay"
  >
    <div class="pay_title">
      <div> 支付总金额 <span>￥ {{pay.price}}</span> </div>
    </div>
    <div class="pay_content">
      <div class="wx_title">微信支付</div>
      <div class="wx_content">
        <canvas ref="canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
/* 
1 token 肯定是存在 
2 提交订单页面的时候 token 使用是正常 跳转页面 跳到了  支付页面的时候 支付页面正常
3 唯独在支付页面的  刷新 一下 支付页面 崩溃
  1 没有token 
4 原因
  1 点击刷新按钮  页面会重新加载
  2 先触发 mounted
  3 触发 从缓存中 获取token => 赋值给 vuex
5 解决 ? 
  1 watch 或者 computed
    1 感觉凉凉 
    2 
  2 mounted 开启一个永久的定时器
    1 反复去判断 token有值了没有 
    2 有值了 
      1 清除定时器 
      2 获取token 发送请求 完成 功能 
  3 
  4 



 */
import QRCode from "qrcode";
export default {
  /* 
  1 直接刷新 
    1 $store.state.user.token =  ""
    2 等待一会 $store.state.user.token =  有真正的值了 
  2 从上一个页面跳转过来
    1 跳转之前  $store.state.user.token 已经有值了
    2 跳转支付页面 $store.state.user.token   
           handler: 'someMethod',
           immediate: true
    3 不管 token有没有变化 都会先触发一次 
   */
  watch: {
    // "$store.state.user.token": {
    //   handler: function () {
    //     if (this.$store.state.user.token) {
    //       console.log("=====watch start");
    //       console.log(this.$store.state.user.token);
    //       console.log("=====watch end");
    //     }
    //   },
    //   // 页面打开的时候先触发一次
    //   immediate: true,
    // },
  },

  data() {
    return {
      // 订单详情对象
      pay: null,
      // 定时器的id
      // timeId:null
    };
  },

  async mounted() {
    let timeId = setInterval(async () => {
      if (this.$store.state.user.token) {
        clearInterval(timeId);
        const { id } = this.$route.query;
        const { token } = this.$store.state.user;
        const res = await this.$axios.get("/airorders/" + id, {
          headers: {
            Authorization: "Bearer " + token,
          },
        });
        console.log(res);
        this.pay = res.data; // 成功的赋值了!!   // this.pay=  赋值 是异步的!!!
        // this.pay 等于一个对象
        // 视图中的 template中的代码 执行没有那么快 (本质操作一个真实的dom元素)
        /* 生成 二维码 开始 */
        this.$nextTick(function () {
          // dom元素发生更新
          const canvas = this.$refs.canvas; //
          QRCode.toCanvas(
            canvas,
            this.pay.payInfo.code_url,
            {
              width: 500,
            },
            (error) => {
              if (error) {
                console.error(error);
                return;
              }

              // console.log("success!");
              // 检查 订单状态
              this.getOrderStatus({
                id,
                nonce_str: this.pay.payInfo.nonce_str,
                out_trade_no: this.pay.payInfo.order_no,
              });
            }
          );
        });
        /* 生成 二维码 结束 */
      }
    }, 100);
  },
  methods: {
    // setInterval
    async getOrderStatus(payParams) {
      // 发送请求获取订单支付状态
      // 还没有支付 反复去问
      // 已经支付  弹窗提示用户  (关闭定时器)
      const { token } = this.$store.state.user;
      const res = await this.$axios.post("/airorders/checkpay", payParams, {
        headers: {
          Authorization: "Bearer " + token,
        },
      });
      // console.log(res);
      if (res.data.trade_state === "NOTPAY") {
        // 未支付
        // 重复发送请求
        setTimeout(() => {
          this.getOrderStatus(payParams);
        }, 3000);
      } else {
        // 支付成功
        console.log("支付成功");
      }
    },
  },
};
</script>

<style lang="less" >
body {
  background-color: #f5f5f5;
}
.pay {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  .pay_title {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    div {
      font-size: 18px;
      span {
        font-size: 40px;
        color: red;
      }
    }
  }
  .pay_content {
    height: 580px;
    background-color: #fff;
    border-top: 3px solid #ffa500;
    .wx_title {
      height: 100px;
      display: flex;
      align-items: center;
      font-size: 38px;
      padding-left: 30px;
    }
  }
}
</style>